<template>
  <div class="contact">
    <div class="contact-title">
      <div class="contact-title-one">
        联系我们
      </div>
      <div class="contact-title-two">
        欢迎来到容猫，您的关注是我们最大的动力
      </div>
    </div>
    <div class="contact-wrap">
      <img src="~assets/img/company-address.png" alt="" class="contact-address">
      <div class="contact-content">
        <div class="contact-content-top">
          <div class="contact-cooperation-wrap">
            <div class="contact-cooperation">
              <img src="~assets/img/yiyuan.png" alt="" class="contact-cooperation-icon">
              <div class="contact-cooperation-text">
                机构医院合作
              </div>
            </div>
            <div class="contact-cooperation-data">
              hezuo@rongcat.com
            </div>
          </div>
          <div class="contact-cooperation-wrap">
            <div class="contact-cooperation">
              <img src="~assets/img/shichangfenxi.png" alt="" class="contact-cooperation-icon">
              <div class="contact-cooperation-text">
                市场合作
              </div>
            </div>
            <div class="contact-cooperation-data">
              shichang@rongcat.com
            </div>
          </div>
          <div class="contact-cooperation-wrap">
            <div class="contact-cooperation">
              <img src="~assets/img/yewuchuli.png" alt="" class="contact-cooperation-icon">
              <div class="contact-cooperation-text">
                业务咨询
              </div>
            </div>
            <div class="contact-cooperation-data">
              zixun@rongcat.com
            </div>
          </div>
        </div>
        <div class="contact-content-bottom">
          <div class="contact-cooperation-wrap">
            <div class="contact-cooperation">
              <img src="~assets/img/tousuzixun.png" alt="" class="contact-cooperation-icon">
              <div class="contact-cooperation-text">
                投诉建议
              </div>
            </div>
            <div class="contact-cooperation-data">
              tousu@rongcat.com
            </div>
          </div>
          <div class="contact-cooperation-wrap">
            <div class="contact-cooperation">
              <img src="~assets/img/kefu.png" alt="" class="contact-cooperation-icon">
              <div class="contact-cooperation-text">
                客服邮箱
              </div>
            </div>
            <div class="contact-cooperation-data">
              kefu@rongcat.com
            </div>
          </div>
          <div class="contact-cooperation-wrap">
            <div class="contact-cooperation">
              <img src="~assets/img/dianhua.png" alt="" class="contact-cooperation-icon">
              <div class="contact-cooperation-text">
                客服电话
              </div>
            </div>
            <div class="contact-cooperation-data">
              400-6262-400
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.contact {
  width: 100%;
  height: 791px;
  position: relative;
  .contact-title {
    width: 100%;
    height: 140px;
    background: rgba(255, 255, 255, 1)
      linear-gradient(
        270deg,
        rgba(67, 92, 255, 0.5) 0%,
        rgba(151, 128, 255, 1) 100%
      );
      overflow: hidden;
    text-align: center;
    .contact-title-one {
      font-size: 24px;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 33px;
      margin-top: 19px;
    }
    .contact-title-two {
      font-size: 14px;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 20px;
    }
  }
  .contact-wrap{
    width: 1190px;
    height:657px;
    background:rgba(255,255,255,1);
    box-shadow:0px 2px 20px 0px rgba(80,76,255,0.15);
    border-radius:4px;
    position: absolute;
    top: 94px;
    left: 50%;
    margin-left: -535px;
  }
  .contact-address{
    width:1190px;
    height:360px;
  }
  .contact-content{
    width: 100%;
    height: 300px;
    .contact-content-top{
      width: 100%;
      height: 148px;
      border-bottom:1px solid rgba(246,246,246,1);
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    .contact-cooperation-wrap{
      width: 183px;
    }
    .contact-cooperation{
      display: flex;
      .contact-cooperation-icon{
        width: 16px;
        height: 16px;
      }
      .contact-cooperation-text{
        margin-left: 10px;
        font-size:16px;
        font-family:PingFangSC-Medium,PingFang SC;
        font-weight:600;
        color:rgba(51,51,51,1);
        line-height:16px;
      }
    }
    .contact-cooperation-data{
      font-size:14px;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:rgba(102,102,102,1);
      line-height:20px;
      margin-left: 26px;
      margin-top: 10px;
    }
    .contact-content-bottom{
      width: 100%;
      height: 148px;
      border-bottom:1px solid rgba(246,246,246,1);
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    .contact-cooperation{
      display: flex;
      .contact-cooperation-icon{
        width: 16px;
        height: 16px;
      }
      .contact-cooperation-text{
        margin-left: 10px;
        font-size:16px;
        font-family:PingFangSC-Medium,PingFang SC;
        font-weight:600;
        color:rgba(51,51,51,1);
        line-height:16px;
      }
    }
    .contact-cooperation-data{
      font-size:14px;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:rgba(102,102,102,1);
      line-height:20px;
      margin-left: 26px;
      margin-top: 10px;
    }
  }
}
</style>
